<ion-header>
  <ion-navbar>
    <ion-title>首页</ion-title>
  </ion-navbar>
</ion-header>

<ion-content class="home">
  <ion-segment [(ngModel)]="articleTab" color="primary">
    <ion-segment-button value="recommend">
      推荐阅读
    </ion-segment-button>
    <ion-segment-button value="articleList">
      法律文章
    </ion-segment-button>
  </ion-segment>

  <div [ngSwitch]="articleTab" class="article-list-container">
    <ion-list *ngSwitchCase="'recommend'">
      <ion-refresher (ionRefresh)="recommendArticleRefresh($event)">
        <ion-refresher-content></ion-refresher-content>
      </ion-refresher>
      <ion-item (click)="articleDetailClick(article)" *ngFor="let article of commendArticle.recommendArticles">
        <ion-thumbnail item-start float-left>
          <img src="{{article.showPic}}">
        </ion-thumbnail>
        <div class="article-list" float-left padding-left>
          <p [innerHtml]='article.title'></p>
          <h2>
            {{article.creator.nickName}} <span>{{article.createTime | dateAgoPipe}}</span>
            <ion-icon margin-right ios="ios-star-outline" md="md-star-outline"> {{article.enshrineCount}}</ion-icon>
          </h2>
        </div>
      </ion-item>
      <div no-lines *ngIf="commendArticle.commendLoadOver" class="load-over-msg">
        <span></span>
        别扯啦，裤子都被你撤掉了
        <span></span>
      </div>
      <ion-infinite-scroll (ionInfinite)="loadRecommendMore($event)">
        <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="正在加载...">
        </ion-infinite-scroll-content>
      </ion-infinite-scroll>
    </ion-list>
    <ion-list *ngSwitchCase="'articleList'">
      <ion-refresher (ionRefresh)="articleRefresh($event)">
        <ion-refresher-content></ion-refresher-content>
      </ion-refresher>
      <ion-item (click)="articleDetailClick(article)" *ngFor="let article of article.articles">
        <ion-thumbnail item-start float-left>
          <img src="{{article.showPic}}">
        </ion-thumbnail>
        <div class="article-list" float-left padding-left>
          <p [innerHtml]='article.title'></p>
          <h2>
            {{article.creator.nickName}} <span>{{article.createTime | dateAgoPipe}}</span>
            <ion-icon margin-right ios="ios-star-outline" md="md-star-outline"> {{article.enshrineCount}}</ion-icon>
          </h2>
        </div>
      </ion-item>
      <div no-lines *ngIf="article.loadOver" class="load-over-msg">
        <span></span>
        别扯啦，裤子都被你撤掉了
        <span></span>
      </div>
      <ion-infinite-scroll (ionInfinite)="loadArticleMore($event)">
        <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="正在加载...">
        </ion-infinite-scroll-content>
      </ion-infinite-scroll>
    </ion-list>
  </div>

  <ion-fab right bottom>
    <button ion-fab color="light">
      <ion-icon name="arrow-dropup"></ion-icon>
    </button>
    <ion-fab-list side="top">
      <button (click)="publishArticleClick()" ion-fab style="font-size: 10px">文章</button>
      <button (click)="createSubjectClick()" ion-fab style="font-size: 10px">话题</button>
      <button (click)="webview()" ion-fab style="font-size: 10px">webview</button>
    </ion-fab-list>
  </ion-fab>
</ion-content>
